import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {
  SuperUploadComponent,
  OssParams,
  UploadConfig,
} from '../../components/upload/upload.component';

@Component({
  selector: 'app-super-upload-demo',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, SuperUploadComponent],
  template: `
    <div class="demo-container">
      <div class="demo-section">
        <h3>基本用法</h3>
        <div class="demo-upload-container">
          <app-super-upload
            [config]="config()"
            [formControl]="presetImageControl"
            (uploaded)="onImageUploaded($event)"
            (deleted)="onImageDeleted()"
            (error)="onUploadError($event)"
          >
          </app-super-upload>
        </div>

        @if (uploadedImageUrl()) {
        <div class="result-container">
          <h4>上传结果</h4>
          <p class="url-display">{{ uploadedImageUrl() }}</p>
        </div>
        } @if (errorMessage()) {
        <div class="error-container">
          <h4>错误信息</h4>
          <p class="error-message">{{ errorMessage() }}</p>
        </div>
        }
      </div>

      <div class="demo-section">
        <h3>预设图片示例</h3>

        <div class="demo-upload-container">
          <app-super-upload
            (uploaded)="onPresetImageUploaded($event)"
            (deleted)="onPresetImageDeleted()"
            (error)="onUploadError($event)"
          >
          </app-super-upload>
        </div>

        <div class="actions">
          <button class="action-button" (click)="setRandomPresetImage()">
            设置随机预设图片
          </button>
          <button class="action-button" (click)="clearPresetImage()">
            清除预设图片
          </button>
        </div>

        <div class="result-container" *ngIf="presetImageControl.value">
          <h4>当前图片URL</h4>
          <p class="url-display">{{ presetImageControl.value }}</p>
        </div>
      </div>

      <div class="demo-section">
        <h3>自定义文件限制</h3>

        <div class="demo-upload-container">
          <app-super-upload
            [accept]="'image/jpeg;image/png'"
            [maxFileSize]="1 * 1024 * 1024"
            (uploaded)="onImageUploaded($event)"
            (deleted)="onImageDeleted()"
            (error)="onUploadError($event)"
          >
          </app-super-upload>
        </div>
        <p class="constraints">只允许JPG和PNG格式，最大1MB</p>
      </div>

      <div class="demo-section">
        <h3>自定义上传接口</h3>

        <div class="demo-upload-container">
          <app-super-upload
            (uploaded)="onCustomUploaded($event)"
            (deleted)="onCustomDeleted()"
            (error)="onUploadError($event)"
          >
          </app-super-upload>
        </div>
      </div>

      <div class="demo-section">
        <h3>带OSS参数的上传</h3>

        <div class="demo-upload-container">
          <app-super-upload
            (uploaded)="onOssUploaded($event)"
            (deleted)="onOssDeleted()"
            (error)="onUploadError($event)"
          >
          </app-super-upload>
        </div>
        <div class="constraints">
          <h4>OSS参数</h4>
          <pre>{{ ossParamsDisplay() }}</pre>
        </div>
        @if (ossUploadedUrl()) {
        <div class="result-container">
          <h4>OSS上传结果</h4>
          <p class="url-display">{{ ossUploadedUrl() }}</p>
        </div>
        }
      </div>

      <div class="features">
        <h3>新功能与增强</h3>
        <ul>
          <li>
            <strong>自定义上传接口</strong>：通过 [action]="接口URL"
            指定上传接口
          </li>
          <li>
            <strong>OSS参数上传</strong>：通过 [ossParams]="参数对象"
            传递OSS参数
          </li>
          <li><strong>上传优先级</strong>：自定义接口 > OSS参数 > 默认上传</li>
          <li><strong>类型安全</strong>：使用TypeScript接口定义OSS参数格式</li>
        </ul>
      </div>
    </div>
  `,
  styles: `
    .demo-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    h2 {
      margin-bottom: 24px;
      color: #333;
      font-size: 28px;
      font-weight: 600;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
    }

    .demo-section {
      margin-bottom: 30px;
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 8px;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 16px;
      color: #333;
      font-size: 20px;
    }

    p {
      margin: 0 0 16px;
      color: #666;
    }

    .demo-upload-container {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }

    .result-container, .error-container {
      margin-top: 16px;
      padding: 12px;
      border-radius: 4px;
    }

    .result-container {
      background-color: #e8f5e9;
      border: 1px solid #c8e6c9;
    }

    .error-container {
      background-color: #ffebee;
      border: 1px solid #ffcdd2;
    }

    h4 {
      margin-top: 0;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 500;
    }

    .url-display {
      font-family: monospace;
      word-break: break-all;
      background-color: #f5f5f5;
      padding: 8px;
      border-radius: 4px;
      overflow: auto;
      font-size: 14px;
    }

    .error-message {
      color: #d32f2f;
    }

    .actions {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .action-button {
      padding: 8px 16px;
      background-color: #5b8af5;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s;
    }

    .action-button:hover {
      background-color: #4a7ae0;
    }

    .constraints {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-top: 8px;
    }

    pre {
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 4px;
      overflow: auto;
      font-size: 13px;
      line-height: 1.4;
    }

    .features {
      margin-top: 30px;
      padding: 20px;
      background-color: #e3f2fd;
      border-radius: 8px;
    }

    .features ul {
      margin: 0;
      padding-left: 20px;
    }

    .features li {
      margin-bottom: 8px;
      line-height: 1.5;
    }
  `,
})
export class SuperUploadDemoComponent {
  uploadedImageUrl = signal<string | null>(null);
  errorMessage = signal<string | null>(null);

  // 使用FormControl替代signal
  presetImageControl = new FormControl<string | null>(null);

  config = signal<UploadConfig>({
    useCustomUploader: false,
    action: 'http://localhost:3000/upload/single',
    uploadFileName: 'file',
  });

  // constructor() {
  //   this.presetImageControl.setValue('http://localhost:3000/uploads/1743912901369-hh.jpg')
  // }

  ossUploadParams = signal<OssParams>({
    key: 'some-key',
    policy: 'base64-policy',
    signature: 'signature-value',
    ossAccessKeyId: 'access-key-id',
    dir: 'upload-dir/',
    host: 'https://example-bucket.oss-cn-region.aliyuncs.com',
  });

  ossUploadedUrl = signal<string | null>(null);
  ossParamsDisplay = signal<string>(
    JSON.stringify(
      {
        key: 'some-key',
        policy: 'base64-policy',
        signature: 'signature-value',
        ossAccessKeyId: 'access-key-id',
        dir: 'upload-dir/',
        host: 'https://example-bucket.oss-cn-region.aliyuncs.com',
      },
      null,
      2
    )
  );

  private randomImages = [
    'https://example.com/sample1.jpg',
    'https://example.com/sample2.jpg',
    'https://example.com/sample3.jpg',
    'https://example.com/sample4.jpg',
  ];

  onImageUploaded(url: string): void {
    console.log('图片上传成功:', url);
    this.uploadedImageUrl.set(url);
    this.errorMessage.set(null);
  }

  onImageDeleted(): void {
    console.log('图片已删除');
    this.uploadedImageUrl.set(null);
  }

  onUploadError(error: string): void {
    console.error('上传错误:', error);
    this.errorMessage.set(error);
  }

  onPresetImageUploaded(url: string): void {
    console.log('预设图片更新为:', url);
    this.presetImageControl.setValue(url);
  }

  onPresetImageDeleted(): void {
    console.log('预设图片已删除');
    this.presetImageControl.setValue(null);
  }

  onCustomUploaded(url: string): void {
    console.log('自定义上传成功:', url);
    this.uploadedImageUrl.set(url);
  }

  onCustomDeleted(): void {
    console.log('自定义上传图片已删除');
    this.uploadedImageUrl.set(null);
  }

  onOssUploaded(url: string): void {
    console.log('OSS上传成功:', url);
    this.ossUploadedUrl.set(url);
    this.errorMessage.set(null);
  }

  onOssDeleted(): void {
    console.log('OSS上传图片已删除');
    this.ossUploadedUrl.set(null);
  }

  setRandomPresetImage(): void {
    const randomUrl =
      this.randomImages[Math.floor(Math.random() * this.randomImages.length)];
    this.presetImageControl.setValue(randomUrl);
  }

  clearPresetImage(): void {
    this.presetImageControl.setValue(null);
  }
}
